<style lang="less">
    @import './index.less';
</style>

<template>
    <div>
        <Row :gutter="10">
            <i-col span="6">
            <div class="page-control">
                <h3>公司组织树形结构图</h3>
                <!-- <Form :label-width="90">
                    <Tooltip content="添加组织单元">
                        <Button><i class="iconfont icon-addteam"></i></Button>
                    </Tooltip>
                    <Tooltip content="删除组织单元">
                        <Button><i class="iconfont icon-deleteteam"></i></Button>
                    </Tooltip>
                    <Tooltip content="添加员工">
                        <Button><i class="iconfont icon-adduser"></i></Button>
                    </Tooltip>
                    <Tooltip content="添加员工">
                        <Button><i class="iconfont icon-deleteuser"></i></Button>
                    </Tooltip>
                    <Tooltip class="pull-right" content="刷新">
                    <Button @click="init">
                    <Icon type="refresh"></Icon>
                    </Button>
                    </Tooltip>
                </Form> -->
            </div>

            <Card dis-hover>
                <div>
                    <org-tree ref="orgTree"  @on-select-change="selectItems"></org-tree>
                </div>
            </Card>
            </i-col>

            <i-col span="18">
                <div v-if="nodeInfo.type === 'ORG'">
                    <Card shadow>
                        <p slot="title">介绍</p>
                        <modifyBtn slot="extra" @modifyClick="modify"></modifyBtn>
                        <!-- <Button slot="extra" icon="edit" size="small" type="primary" @click="modify">修改信息</Button> -->
                        <h1>{{nodeInfo.name}}</h1>
                    </Card>
                    <Card shadow class="margin-top-10">
                        <p slot="title">子部门</p>
                        <add-btn slot="extra"  @addclick="add"></add-btn>
                        <Table :columns="column.omgColumn" :data="omgList"></Table>
                    </Card>
                    <Card shadow class="margin-top-10">
                        <p slot="title">职员</p>
                        <Table :columns="column.employeeColumn" :data="employeeList"></Table>
                    </Card>
                </div>
                <div v-if="nodeInfo.type === 'EMPLOYEE'">
                    <Card dis-hover>
                        <p slot="title">职员信息</p>
                        <Row>
                            <i-col span="16" offset="3">
                                <Form :model="nodeInfo" label-position="right" :label-width="80">
                                    <FormItem label="姓名">
                                        <Input v-model="nodeInfo.name" disabled></Input>
                                    </FormItem>
                                    <FormItem label="职务">
                                        <Input v-model="nodeInfo.attr.position" disabled></Input>
                                    </FormItem>
                                </Form>
                            </i-col>
                        </Row>
                    </Card>
                </div>
            </i-col>
        </Row>
        <Modal v-model="addModal" title="新建组织" width="800" ok-text="创建" @on-ok="submitOmg"  @on-cancel="cancel">
            <Row>
                <i-col span="16" offset="4">
                    <Form :model="addForm" label-position="left" :label-width="80">
                        <FormItem label="选择父部门">
                            <Input v-model="nodeInfo.name" disabled></Input>
                        </FormItem>
                        <FormItem label="部门名称">
                            <Input v-model="addForm.org_name"></Input>
                        </FormItem>
                        <FormItem label="类型">
                            <Select v-model="addForm.type">
                                <Option value="事业部">事业部</Option>
                            </Select>
                        </FormItem>
                    </Form>
                </i-col>
            </Row>
        </Modal>
        <Modal v-model="modifyModal" title="编辑组织" width="800" ok-text="保存" @on-ok="modifyOmg"  @on-cancel="cancel">
            <Row>
                <i-col span="16" offset="4">
                    <Form :model="modifyForm" label-position="left" :label-width="80">
                        <FormItem label="部门名称">
                            <Input v-model="modifyForm.org_name"></Input>
                        </FormItem>
                    </Form>
                </i-col>
            </Row>
        </Modal>
    </div>
</template>

<script>
  import _ from 'lodash';
  import column from './column';
  import orgTree from '@/views/my-components/org-tree/org-tree.vue';
  import addBtn from './component/access-add-button.vue';
  import modifyBtn from './component/access-modify-button.vue';


  export default {
    data () {
      return {
          nodeInfo:{},
          nodeChildren:[],
          column:column,
          omgList:[],
          employeeList:[],
          addModal:false,
          modifyModal:false,
          modifyForm:{},
          addForm:{},
          omg:[],
          loading: true
      };
    },
    methods: {
        selectItems (item) {
          let self = this
          self.nodeInfo = item
          self.omgList = []
          self.employeeList = []
          this.$http.get('/hr/orgs?pid=' + item.id).then(
          function (res) {
            _.map(res.data,item => {
                if(item.type === 'ORG') {
                    self.omgList.push(item)
                }else{
                    self.employeeList.push(item)
                }
            })
          })
        },
        add() {
            let self = this
            self.addModal = true
            console.info(self.nodeInfo)
            self.addForm.parent_org_id = self.nodeInfo.name
        },
        submitOmg() {
            let self = this
            self.addForm.parent_org_id = self.nodeInfo.id
            console.info(self.addForm)
            this.$http.post('/hr/org',self.addForm).then(
                function (res) {
                    self.$Message.success(res.data.message)
                    self.addModal = false
                    self.$refs.orgTree.init();
                    self.addForm={}
                    self.selectItems(self.nodeInfo)//右侧页面刷新为空
                }).catch(() => {
                    self.$Message.error('添加失败，请稍后再试！')
            })
        },
        cancel() {
            this.addForm = {}
        },
        modify() {
            let self = this
            self.modifyModal = true
            self.modifyForm.org_id = self.nodeInfo.id
            self.modifyForm.org_name = self.nodeInfo.name
        },
        modifyOmg() {
            let self = this
            this.$http.put('/hr/org',self.modifyForm).then((res) => {
                self.$Message.success(res.data.message)
                self.addModal = false
                self.$refs.orgTree.init();
                self.modifyForm={}
                self.nodeInfo.type = ''//右侧页面刷新为空
            }).catch(() => {
                self.$message.error('修改失败，请稍后再试！')
            })
        }
    },
    components: {
      orgTree,
      addBtn,
      modifyBtn
    },
    computed: {},
    watch: {},
    mounted () {
      this.$refs.orgTree.init();
    //   this.$http.post('/hr/org',{org_name:'奥维万象',parent_org_id:''}).then((res) => {
    //       console.info(res)
    //   })
    }
  };
</script>
